<template>
	<u-tabbar :value="currentPage" @change="change" activeColor="#FCB527">
		<u-tabbar-item class="u-tabar_item" v-for="item in tabbarList" :key="item.id" :text="item.text">
			<image class="u-page__item__slot-icon" :class="[item.id == 2 ? 'center': '']" slot="active-icon"
				:src="item.selectIcon"></image>
			<image class="u-page__item__slot-icon" :class="[item.id == 2 ? 'center': '']" slot="inactive-icon"
				:src="item.icon"></image>
		</u-tabbar-item>
	</u-tabbar>
</template>

<script>
	export default {
		name: 'tabbar',
		props: {
			currentPage: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				defaultValue: 0,
				tabbarList: [{
					id: 0,
					path: "/pages/index/home",
					icon: "/static/tabBar/shouye.png",
					selectIcon: "/static/tabBar/active_home.png",
					text: "首页",
					centerItem: false
				}, {
					id: 1,
					path: "/pages/index/product",
					icon: "/static/tabBar/store.png",
					selectIcon: "/static/tabBar/active_store.png",
					text: "商品",
					centerItem: false
				}, {
					id: 2,
					path: "/pages/index/equipment",
					icon: "/static/tabBar/logo.png",
					selectIcon: "/static/tabBar/logo.png",
					text: "设备管理",
					centerItem: true
				}, {
					id: 3,
					path: "/pages/index/orderForm",
					icon: "/static/tabBar/order.png",
					selectIcon: "/static/tabBar/actice_order.png",
					text: "订单",
					centerItem: false
				}, {
					id: 4,
					path: "/pages/index/my",
					icon: "/static/tabBar/me.png",
					selectIcon: "/static/tabBar/active_me.png",
					text: "我的",
					centerItem: false
				}]
			}
		},
		mounted() {
			uni.hideTabBar()
			
		},
		methods: {
			change(e) {
				const path = this.tabbarList[e].path
				uni.switchTab({
					url: path
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-page__item__slot-icon {
		width: 40rpx;
		height: 40rpx;
	}
	.center {
		width: 110rpx;
		height: 110rpx;
		position: absolute;
		top: -40rpx;
		
	}
</style>